<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	</head>
	<body>
		<h1>1111</h1>
		<script>
			1. 物理像素: 分辨率,固定,出厂那天就确定了,单位pt---设计稿(750*1334)
			2. 逻辑像素: css像素,单位是px (375*677)
			
			(像素比)DPR: 物理像素/逻辑像素 = 2,
			
			3.视口(移动端必须)
			width=device-width 宽度等于视口的宽度
			initial-scale=1    初始的 pc和移动端 1:1,实现效果,
			minimum-scale=1    最小缩放比率1
			maximum-scale=1    最大缩放比率1
			user-scalable=no   用户是否能缩放 no/yes
			
			4.移动端适配
			
			  使用百分比布局  宽度可以百分比,但是高度有问题
			  弹性盒  
			   
			  rem单位
			     绝对单位:px,
				 
			     相对单位:em rem,
		
			     em:相对于父级 字体大小,
				 rem:相对于根元素 字体大小,
				 
				 给跟元素设置一个字体大小---通rem来实现适配
			  
			  媒体查询技术(bootstrap--栅格布局--@media)
			  vh/vw单位  高为100vh  宽度100vw
			             使用 calc() 来计算
		</script>
	</body>
</html>
